<template>
  <GcTable
    v-loading="loading"
    v-model:searchKeywords="searchKeywords"
    :pagination="pagination"
    :columns="DYNAMIC_COLUMNS"
    :tableData="tableData"
    :filterList="filterList"
    :defaultFilter="defaultFilter"
    searchPlaceholder="请输入昵称进行搜索"
    @selection-change="handlerSelectionChange"
    @current-change="handlerCurrentChange"
    @search="handlerSearch"
    @get-search-params="getSearchParams"
    @reset-fileds="resetSearchParams">
    <template #btn-group>
      <el-button
        v-permission="'user-dynamic-manage-permission:btn:delete'"
        type="danger"
        :icon="Delete"
        :disabled="!selectIds.length"
        @click="batchDeleteDynamic(selectIds)"
        >批量删除</el-button>
    </template>
    <template #dynamicType="{ row }">
      <span>{{ dynamicTypeMap[row.type] }}</span>
    </template>
    <template #dynamicDesc="{ row }">
      <span>{{ getDynamicObject(row.articleId, row.circleId, row.focusUserId) }}</span>
    </template>
    <template #operate="{ row }">
      <div class="operate-btn-group center">
        <gc-icon-button
          v-permission="'user-dynamic-manage-permission:btn:delete'"
          type="link"
          @click="batchDeleteDynamic([row.id])">删除</gc-icon-button>
      </div>
    </template>
  </GcTable>
</template>

<script setup lang="ts" name="UserDynamic">
import { ref, reactive } from 'vue'
import { DYNAMIC_COLUMNS } from './const'
import usePagination from '@/hooks/usePagination'
import { Delete } from '@element-plus/icons-vue'
import type { Dynamic } from '@/http/type'
import type { Pagination } from '@/@type'
import { apiGetDynamicList, apiBatchDeleteDynamic } from '@/http/service'
import { ElMessage, ElMessageBox } from 'element-plus'
interface ResponseDynamic extends Pagination {
  dataList: Array<Dynamic>
}
interface AdvanceSearch {
 type: string
}

const dynamicTypeMap = {
  1: '发布',
  2: '点赞',
  3: '关注',
  4: '收藏'
} as any
const { pagination, loading } = usePagination()
const selectIds = ref<Array<string>>([])
const tableData = ref<Array<Dynamic>>([])
const searchKeywords = ref('')
const filterList = [
  {
    name: '动态类型',
    key: 'type',
    type: 'select' as const,
    placeholder: '请选择动态类型',
    options: Object.entries(dynamicTypeMap).reduce((prev, cur) => {
      const optionItem = { value: cur[0], label: cur[1] as string }
      prev.push(optionItem)
      return prev
    }, [] as Array<{ value: string, label: string }>)
  }
]
const defaultFilter = reactive<AdvanceSearch>({
  type: ''
})

/**
 * 用户动态列表查询
 */
async function findDynamicList () {
  const searchParams = {
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    searchKeywords: searchKeywords.value,
    ...defaultFilter
  }
  loading.value = true
  try {
    const { dataList, ...pageInfo } = await apiGetDynamicList<ResponseDynamic>(searchParams)
    tableData.value = dataList
    Object.assign(pagination, pageInfo)
  } catch (error) {
    tableData.value = []
  } finally {
    loading.value = false
  }
}
findDynamicList()

/**
 * 批量删除动态
 * @param ids
 */
async function batchDeleteDynamic (ids: Array<string>) {
  await ElMessageBox.confirm(
    '确认删除选中的动态信息？',
    '提示',
    { type: 'warning' }
  )
  await apiBatchDeleteDynamic({ ids })
  ElMessage.success('删除动态成功')
  findDynamicList()
}

function getDynamicObject (articleId: string, circleId: string, focusUserId: string) {
  if (articleId) {
    return '文章'
  }
  if (circleId) {
    return '友圈'
  }
  if (focusUserId) {
    return '用户'
  }
}

function handlerSelectionChange (selections: Array<Dynamic>) {
  selectIds.value = selections.map(o => o.id)
}

function handlerSearch () {
  pagination.pageNo = 1
  findDynamicList()
}

function handlerCurrentChange (val: number) {
  pagination.pageNo = val
  findDynamicList()
}

function getSearchParams (searchParams: AdvanceSearch) {
  Object.assign(defaultFilter, searchParams)
  findDynamicList()
}

function resetSearchParams (searchParams: AdvanceSearch) {
  searchKeywords.value = ''
  Object.assign(defaultFilter, searchParams)
  findDynamicList()
}
</script>

<style lang="scss" scoped></style>
